<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<!--
    Shadow DOM 是 Web Components 里面的一个重要 API：浏览器将模板、样式表、属性、JavaScript 码等，封装成一个独立的 DOM 元素。

    外部的设置无法影响到其内部，而内部的设置也不会影响到外部，与浏览器处理原生网页元素（比如<video>元素）的方式很像。

    Shadow DOM 最大的好处有两个，一是可以向用户隐藏细节，直接提供组件，二是可以封装内部样式表，不会影响到外部。
 -->

	<body>
		<div id="div"></div>
		<script>
			// attachShadow() creates a shadow root.
			let shadow = div.attachShadow({ mode: 'open' });
			let inner = document.createElement('b');
			inner.appendChild(document.createTextNode('Conard Li Hiding in the shadows'));

			// shadow root supports the normal appendChild method.
			shadow.appendChild(inner);
			console.log(div.querySelector('b')); // empty
		</script>
	</body>
</html>
